<template>
  <div class="padding flex direction-column height-100">
    <el-table
      class="table" v-loading="loading" :data="lists" height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
        <template v-if="column.prop === 'status'" #default="{ row }">
          <div class="inline-flex align-center">
            <el-switch v-model="row.status" @change="toggleStatus(row.id, $event)"></el-switch>
            <span class="margin-left text-gray">{{ row.status ? '已启用' : '已停用' }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'enterprise-process-setting',
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '编码', prop: 'code' },
        { label: '名称', prop: 'name' },
        { label: '状态', prop: 'status' },
        { label: '备注', prop: 'desc' },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          this.lists = [
            {
              id: '1',
              code: 'quanchang',
              name: '全厂',
              status: true,
              desc: ''
            },
            {
              id: '2',
              code: 'gaoyapeidianfang',
              name: '高压配电房',
              status: true,
              desc: ''
            },
            {
              id: '3',
              code: 'pidaichen',
              name: '皮带秤',
              status: true,
              desc: ''
            },
            {
              id: '4',
              code: 'reli',
              name: '热力',
              status: false,
              desc: ''
            },
          ]
        }, 300)
      })
    },
    toggleStatus (id, status) {
      this.$message.success('操作成功')
    },
  },
}
</script>
